<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>访客登记</h2>
        </div>
      </template>
      
      <el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
        <el-form-item label="访客姓名" required>
          <el-input 
            v-model="form.name" 
            placeholder="请输入真实姓名"
            maxlength="50"
            show-word-limit
          ></el-input>
        </el-form-item>
        
        <el-form-item label="联系电话" required>
          <el-input 
            v-model="form.phone" 
            placeholder="请输入11位手机号"
            maxlength="11"
          ></el-input>
        </el-form-item>
        
        <el-form-item label="访问老人" required>
          <el-select 
            v-model="form.elderId" 
            placeholder="请选择老人"
            style="width: 100%"
          >
            <el-option 
              v-for="elder in elderList"
              :key="elder.id"
              :label="elder.nickname"
              :value="elder.id"
            ></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="到访时间" required>
          <el-date-picker
            v-model="form.visitTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        
        <el-form-item label="备注信息" required>
          <el-input
            v-model="form.notes"
            type="textarea"
            :rows="3"
            placeholder="请输入来访事由等备注信息"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button 
            type="primary" 
            @click="submit"
            style="width: 200px"
          >提交登记</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/utils/http.js'
import utils from "@/utils/tools.js";
import dayjs from 'dayjs'

const form = ref({
  name: '',
  phone: '',
  elderId: '',
  visitTime: '',
  notes: ''
})

const rules = {
  name: [
    { required: true, message: '请输入访客姓名', trigger: 'blur' },
    { max: 50, message: '姓名长度不能超过50个字符', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
  ],
  elderId: { required: true, message: '请选择访问老人', trigger: 'change' },
  visitTime: { required: true, message: '请选择到访时间', trigger: 'change' },
  notes: [
    { required: true, message: '请输入备注信息', trigger: 'blur' },
    { max: 500, message: '备注长度不能超过500个字符', trigger: 'blur' }
  ]
}

const elderList = ref([])
const formRef = ref(null)

onMounted(async () => {
  await getElderList()
})

async function getElderList() {
  try {
    const staff = await http.get(`/staff/selectById/${utils.getCurrentUser().id}`)
    if (staff.data) {
      const buildingId = staff.data.buildingId
      const res = await http.get(`/elder/selectByBuildingId/${buildingId}`)
      elderList.value = res.data
    }
  } catch (e) {
    if (e.response?.status !== 404) {
      ElMessage.error('获取数据失败')
    }
  }
}

const submit = () => {
  formRef.value.validate(valid => {
    if (!valid) return

    http.post('/visitor/add', {
      elderId: form.value.elderId,
      name: form.value.name,
      phone: form.value.phone,
      visitTime: dayjs(form.value.visitTime).format('YYYY-MM-DD HH:mm:ss'),
      staffId: utils.getCurrentUser().id,
      notes: form.value.notes
    }).then(() => {
      ElMessage.success('登记提交成功')
      form.value = {
        name: '',
        phone: '',
        elderId: '',
        visitTime: '',
        notes: ''
      }
    }).catch(e => {
      ElMessage.error(e.response?.data?.message || '提交失败')
    })
  })
}
</script>

<style scoped>
.el-input, .el-select, .el-date-editor {
  width: 100%;
}
</style> 